<template>
	<div>
		<el-dialog 
      title="风险活动信息"
      append-to-body
      :visible.sync="riskActivityDialog"
      :close-on-click-modal="false" 
      :before-close="handleCloseRiskActivity"
      width="60%"
    >
      <el-form :model="riskActivityForm" :rules="riskActivityRules">

        <!-- 工作步骤 -->
        <div class="work_step">
          <el-row>
            <el-col :span="24">
              <el-form-item label="工作步骤" prop="workStep">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入工作步骤"
                  v-model="riskActivityForm.workStep">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 潜在危害 -->
        <div class="potential_hazards">
          <el-row>
            <el-col :span="24">
              <el-form-item label="潜在危害" prop="potentialHazards">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入潜在危害"
                  v-model="riskActivityForm.potentialHazards">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 主要后果 -->
        <div class="main_consequences">
          <el-row>
            <el-col :span="24">
              <el-form-item label="主要后果" prop="mainConsequences">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入主要后果"
                  size="small"
                  v-model="riskActivityForm.mainConsequences">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 现有安全措施 -->
        <div class="current_safe_measure">
          <el-row>
            <el-col :span="24">
              <el-form-item label="现有安全措施" prop="currentSafeMeasure">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入现有安全措施"
                  size="small"
                  v-model="riskActivityForm.currentSafeMeasure">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 可能性 -->
        <div class="possibility_div">
          <el-row>
            <el-col :span="24">
              <el-form-item label="可能性" prop="possibility">
                <el-select 
                  v-model="riskActivityForm.possibility" 
                  clearable 
                  placeholder="请选择可能性"
                  size="small"
                  @change="changePossibility"
                >
                  <el-option
                    v-for="item in possibilities"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 严重度 -->
        <div class="severity_div">
          <el-row>
            <el-col :span="24">
              <el-form-item label="严重度" prop="severity">
                <el-input
                  size="small"
                  :disabled="true" 
                  v-model="riskActivityForm.severity">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 严重度列表 -->
        <div class="severity_table">
          <el-row>
            <el-col :span="24">
              <el-form-item label="">
                <avue-crud 
                  :option="severityOption"
                  :data="severityData"
                  ref="severityCrud"
                >
                  <!-- 选择表格自定义 -->
                  <template slot="choose" slot-scope="scope">
                    <el-radio 
                      v-model="riskActivityForm.severity" 
                      :label="scope.row['dj']"
                      @change="changeSeverityLevel">
                      {{emptyStr}}
                    </el-radio>
                  </template>

                </avue-crud>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 风险值、风险等级 -->
        <div class="severity_basic">
          <el-row>

            <!-- 风险值 -->
            <el-col :span="12">
              <el-form-item label="风险值">
                <div class="disabled_severity_value">
                  <el-input
                    v-model="riskActivityForm.riskValue"
                    :disabled="true"
                    size="small">
                  </el-input>
                </div>
              </el-form-item>
            </el-col>

            <!-- 风险等级 -->
            <el-col :span="12">
              <el-form-item label="风险等级" prop="riskLevel">
                <div class="disabled_severity_level">
                  <el-input
                    v-model="riskActivityForm.riskLevel"
                    :disabled="true"
                    size="small">
                  </el-input>
                </div>
              </el-form-item>
            </el-col>

          </el-row>
        </div>

        <!-- 改进措施 -->
        <div class="improve_measure">
          <el-row>
            <el-col :span="24">
              <el-form-item label="改进措施" prop="improveMeasure">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入改进措施"
                  size="small"
                  v-model="riskActivityForm.improveMeasure">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 按钮 -->
        <div class="risk_activity_footer">
          <el-button 
            type="primary"
            size="small"
            @click="saveRiskActivity"
            :loading="loadSaveRiskActivity">
            确 定
          </el-button>
          <el-button 
            size="small"
            @click="cancelSaveRiskActivity">
            取 消
          </el-button>
        </div>

      </el-form>
    </el-dialog>
	</div>
</template>

<script>
import { getPossibilities, getSeverityList } from "@/api/saferisk/jhariskanalysis";

export default {
  props: {
    riskActivityDialog: {default: false},
    activityType: {default: "ADD"},
    aIndex: {default: ""},
    selectedActivity: {default: {}}
  },
  data() {
    return {
      riskActivityForm: {
        aIndex: "",
        workStep: "",
        potentialHazards: "",
        mainConsequences: "",
        currentSafeMeasure: "",
        possibility: "",
        severity: "",
        riskValue: "",
        riskLevel: "",
        improveMeasure: ""
      },
      riskActivityRules: {
        workStep: [{ required: true, message: '请输入工作步骤', trigger: 'blur' }],
        possibility: [{required: true, message: '请选择可能性', trigger: 'change'}],
        severity: [{required: true, message: '请选择严重度', trigger: 'blur'}]
      },
      possibilities: [],
      loadSaveRiskActivity: false,
      emptyStr: "",
      severityData: [],
      severityOption: {
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchSpan: 6,
        searchMenuSpan: 4,
        border: true,
        index: false,
        menu: false,
        addBtn: false,
        selection: false,
        refreshBtn: false,
        columnBtn: false,
        dialogClickModal: false,
        defaultSort: {prop: "dj", order: "descending"},
        column: [
          {
            label: "选择",
            prop: "choose",
            align: "center",
            width: 50,
            slot: true
          },
          {
            label: "等级",
            prop: "dj",
            align: "center",
            width: 50
          },
          {
            label: "法律法规",
            prop: "flfgjqtyq",
            align: "center"
          },
          {
            label: "人员",
            prop: "ry",
            align: "center"
          },
          {
            label: "财产损失/万元",
            prop: "ccss",
            align: "center",
            width: 100
          },
          {
            label: "停工",
            prop: "tg",
            align: "center"
          },
          {
            label: "公司形象",
            prop: "gsxx",
            align: "center",
            width: 120
          }
        ]
      },
    }
  },
  watch: {
    riskActivityDialog(){
      if(this.riskActivityDialog === true){
        this.initData();
      }
    }
  },
  mounted() {
    this.getPossibilityList();
    this.getSeverities();
  },
  methods: {

    // 获取可能性列表
    getPossibilityList() {
      getPossibilities().then(res => {
        this.possibilities = res.data.data;
      });
    },

    // 获取严重度标准列表
    getSeverities() {
      getSeverityList().then(res => {
        this.severityData = res.data.data;
      });
    },

    // 初始化弹窗
    initData() {
      if(this.activityType === "ADD") {
        this.riskActivityForm = {
          workStep: "",
          potentialHazards: "",
          mainConsequences: "",
          currentSafeMeasure: "",
          possibility: "",
          severity: "",
          riskValue: "",
          riskLevel: "",
          improveMeasure: "",
          aIndex: ""
        };
      } else if(this.activityType === "UPDATE") {
        let row = this.selectedActivity;
        this.riskActivityForm = {
          workStep: row.gzbz,
          potentialHazards: row.qzwh,
          mainConsequences: row.zyhg,
          currentSafeMeasure: row.xyaqcs,
          possibility: row.knx,
          severity: row.yzx,
          riskValue: row.fxz,
          riskLevel: row.fxdj,
          improveMeasure: row.gjcs,
          aIndex: this.aIndex
        };
      }
    },

    // 更换可能性选项
    changePossibility(value) {
      if(this.riskActivityForm.severity === "") {
        return;
      }
      this.riskActivityForm.riskValue = value * this.riskActivityForm.severity;
      this.riskActivityForm.riskLevel = this.formatRiskLevel(this.riskActivityForm.riskValue);
    },

    // 更换严重度选项
    changeSeverityLevel(value) {
      if(this.riskActivityForm.possibility === "") {
        return;
      }
      this.riskActivityForm.riskValue = value * this.riskActivityForm.possibility;
      this.riskActivityForm.riskLevel = this.formatRiskLevel(this.riskActivityForm.riskValue);
    },

    // 获取风险等级
    formatRiskLevel(value) {
      if (value >= 20 && value <=25) {
        return "巨大风险";
      } else if (value >= 15 && value <= 16) {
        return "重大风险";
      } else if (value >= 9 && value <= 12) {
        return "中等风险";
      } else if (value >= 4 && value <= 8) {
        return "可容忍风险";
      } else if (value < 4) {
        return "轻微或可忽略的风险";
      }
    },

    // 保存风险活动
    saveRiskActivity() {
      var activity = this.riskActivityForm;
      if(activity.workStep === "") {
        this.$message.warning("请输入工作步骤!");
        return;
      }
      if(activity.possibility === "") {
        this.$message.warning("请选择可能性!");
        return;
      }
      if(activity.severity === "") {
        this.$message.warning("请选择严重度!");
        return;
      }
      var insertData = {
        gzbz: activity.workStep,
        qzwh: activity.potentialHazards === "" ? "" : activity.potentialHazards,
        zyhg: activity.mainConsequences === "" ? "" : activity.mainConsequences,
        xyaqcs: activity.currentSafeMeasure === "" ? "" : activity.currentSafeMeasure,
        knx: activity.possibility,
        yzx: activity.severity,
        fxz: activity.riskValue,
        fxdj: activity.riskLevel,
        gjcs: activity.improveMeasure === "" ? "" : activity.improveMeasure
      };
      this.$emit('saveRiskActivity', insertData);
    },
    
    // 取消保存风险活动
    cancelSaveRiskActivity() {
      this.$emit('cancelSaveRiskActivity');
    },

    // 关闭弹窗
    handleCloseRiskActivity(done) {
      done();
      this.$emit('handleCloseRiskActivity');
    }

  }
}
</script>